<template>
	<div class="page flex">
		<div class="left">
			<img src="https://file.shengmaapp.com/storage/aichat/20240401/8f3dbd1a7720d7b1c8bd883eb9b6f9e3.jpg" class="background" />
			<div class="main">
				<div class="head flex">
					<div class="cover">
						<img src="https://file.shengmaapp.com/storage/aichat/20240401/8f3dbd1a7720d7b1c8bd883eb9b6f9e3.jpg" />
					</div>
					<div class="info">
						<h3 class="h3 Line2">美妙的同志之歌</h3>
						<div class="prompt">Prompt：Country Pop, Contemporary Country Tropical Rock, Country Rock, mellow, longing, sentimental, summer, love, bittersweet, male vocalist, melancholic, lush</div>
						<div class="tar flex">
							<div class="item flex hover">
								<span class="iconfont icon-gerenzhongxin"></span>
								<span class="text">MoonSet萤火虫</span>
							</div>
							<div class="item flex">
								<span class="text">2024/06/23 04:08</span>
							</div>
						</div>
						<div class="btnFlex flex">
							<div class="item">制作同款歌曲</div>
						</div>
						<div class="playFlex flex">
							<div class="item flex hover">
								<span class="iconfont icon-bofang2"></span><!-- icon-pause-full -->
								<span class="text">42.2W</span>
							</div>
							<div class="item flex">
								<span class="iconfont icon-aixin"></span>
								<span class="text">0.12W</span>
							</div>
							<div class="item flex">
								<span class="iconfont icon-fenxiangzhuanfa"></span>
								<span class="text">882</span>
							</div>
							<div class="item flex">
								<span class="iconfont icon-xiazai5" style="font-size: 15px;"></span>
								<span class="text" v-if="false">0</span>
							</div>
							<div class="playRight flex">
								<div class="item flex">
									<el-dropdown trigger="click">
										<span class="iconfont icon-gengduo2" style="line-height: 35px; font-size: 19px;"></span>
										<el-dropdown-menu slot="dropdown">
											<el-dropdown-item>复制歌词</el-dropdown-item>
											<el-dropdown-item>做同款</el-dropdown-item>
											<el-dropdown-item>举报该歌</el-dropdown-item>
											<el-dropdown-item divided>重命名</el-dropdown-item>
											<el-dropdown-item>删除</el-dropdown-item>
										</el-dropdown-menu>
									</el-dropdown>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="lyrics" v-html="lyrics"></div>
			</div>
		</div>
		<div class="right">
			<div class="main">
				<div class="mainH3 ell">其它推荐</div>
				<div class="musicFlex flex">
					<nuxt-link class="musicItem flex" to="/index/detail/123">
						<div class="cover">
							<img src="https://api.sora13.com/images/aisora-c/141797/20240623/8eafddff73eb42ee8c83daa188c69066_0.jpg" />
						</div>
						<div class="info">
							<div class="h3 ell">如果爱忘了(Live)</div>
							<div class="desc ell">@hillsong Young</div>
						</div>
						<div class="btn iconfont icon-bofang2" @click.stop></div>
					</nuxt-link>
					<nuxt-link class="musicItem flex" to="/index/detail/123">
						<div class="cover">
							<img src="https://api.sora13.com/images/aisora-c/141798/20240623/a21166ee9b9f4a8ab6647e440f87537d_0.jpg" />
						</div>
						<div class="info">
							<div class="h3 ell">如果爱忘了(Live)</div>
							<div class="desc ell">@hillsong Young</div>
						</div>
						<div class="btn iconfont icon-bofang2" @click.stop></div>
					</nuxt-link>
					<nuxt-link class="musicItem flex" to="/index/detail/123">
						<div class="cover">
							<img src="https://api.sora13.com/images/aisora-c/141777/20240623/7f290ac3e33f4221bea37773d8afb405_0.jpg" />
						</div>
						<div class="info">
							<div class="h3 ell">如果爱忘了(Live)</div>
							<div class="desc ell">@hillsong Young</div>
						</div>
						<div class="btn iconfont icon-bofang2" @click.stop></div>
					</nuxt-link>
					<nuxt-link class="musicItem flex" to="/index/detail/123">
						<div class="cover">
							<img src="https://api.sora13.com/images/aisora-c/141777/20240623/9f603765e960411db0ce0fe50cfdb372_0.jpg" />
						</div>
						<div class="info">
							<div class="h3 ell">如果爱忘了(Live)</div>
							<div class="desc ell">@hillsong Young</div>
						</div>
						<div class="btn iconfont icon-bofang2" @click.stop></div>
					</nuxt-link>
					<nuxt-link class="musicItem flex" to="/index/detail/123">
						<div class="cover">
							<img src="https://api.sora13.com/images/aisora-c/141796/20240623/3f030ba7427740fd979e5fbad8ba5bb8_0.jpg" />
						</div>
						<div class="info">
							<div class="h3 ell">如果爱忘了(Live)</div>
							<div class="desc ell">@hillsong Young</div>
						</div>
						<div class="btn iconfont icon-bofang2" @click.stop></div>
					</nuxt-link>
					<nuxt-link class="musicItem flex" to="/index/detail/123">
						<div class="cover">
							<img src="https://api.sora13.com/images/aisora-c/137911/20240623/f59bf79ba18543e4aeb71fba2c932f58_0.jpg" />
						</div>
						<div class="info">
							<div class="h3 ell">如果爱忘了(Live)</div>
							<div class="desc ell">@hillsong Young</div>
						</div>
						<div class="btn iconfont icon-bofang2" @click.stop></div>
					</nuxt-link>
					<nuxt-link class="musicItem flex" to="/index/detail/123">
						<div class="cover">
							<img src="https://api.sora13.com/images/aisora-c/141519/20240623/fbf3749f4e3f4836a704e1b88a0ca5e3_0.jpg" />
						</div>
						<div class="info">
							<div class="h3 ell">如果爱忘了(Live)</div>
							<div class="desc ell">@hillsong Young</div>
						</div>
						<div class="btn iconfont icon-bofang2" @click.stop></div>
					</nuxt-link>
					<nuxt-link class="musicItem flex" to="/index/detail/123">
						<div class="cover">
							<img src="https://api.sora13.com/images/aisora-c/137911/20240623/b64381be613a485a894d28919fd09dc8_0.jpg" />
						</div>
						<div class="info">
							<div class="h3 ell">如果爱忘了(Live)</div>
							<div class="desc ell">@hillsong Young</div>
						</div>
						<div class="btn iconfont icon-bofang2" @click.stop></div>
					</nuxt-link>
					<nuxt-link class="musicItem flex" to="/index/detail/123">
						<div class="cover">
							<img src="https://api.sora13.com/images/aisora-c/141777/20240623/9f603765e960411db0ce0fe50cfdb372_0.jpg" />
						</div>
						<div class="info">
							<div class="h3 ell">如果爱忘了(Live)</div>
							<div class="desc ell">@hillsong Young</div>
						</div>
						<div class="btn iconfont icon-bofang2" @click.stop></div>
					</nuxt-link>
					<nuxt-link class="musicItem flex" to="/index/detail/123">
						<div class="cover">
							<img src="https://api.sora13.com/images/aisora-c/141796/20240623/3f030ba7427740fd979e5fbad8ba5bb8_0.jpg" />
						</div>
						<div class="info">
							<div class="h3 ell">如果爱忘了(Live)</div>
							<div class="desc ell">@hillsong Young</div>
						</div>
						<div class="btn iconfont icon-bofang2" @click.stop></div>
					</nuxt-link>
					<nuxt-link class="musicItem flex" to="/index/detail/123">
						<div class="cover">
							<img src="https://api.sora13.com/images/aisora-c/137911/20240623/f59bf79ba18543e4aeb71fba2c932f58_0.jpg" />
						</div>
						<div class="info">
							<div class="h3 ell">如果爱忘了(Live)</div>
							<div class="desc ell">@hillsong Young</div>
						</div>
						<div class="btn iconfont icon-bofang2" @click.stop></div>
					</nuxt-link>
					<nuxt-link class="musicItem flex" to="/index/detail/123">
						<div class="cover">
							<img src="https://api.sora13.com/images/aisora-c/141519/20240623/fbf3749f4e3f4836a704e1b88a0ca5e3_0.jpg" />
						</div>
						<div class="info">
							<div class="h3 ell">如果爱忘了(Live)</div>
							<div class="desc ell">@hillsong Young</div>
						</div>
						<div class="btn iconfont icon-bofang2" @click.stop></div>
					</nuxt-link>
					<nuxt-link class="musicItem flex" to="/index/detail/123">
						<div class="cover">
							<img src="https://api.sora13.com/images/aisora-c/137911/20240623/b64381be613a485a894d28919fd09dc8_0.jpg" />
						</div>
						<div class="info">
							<div class="h3 ell">如果爱忘了(Live)</div>
							<div class="desc ell">@hillsong Young</div>
						</div>
						<div class="btn iconfont icon-bofang2" @click.stop></div>
					</nuxt-link>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		layout: 'index',
		head() {
			return {
				title: "音乐详情 - AI音乐生成 | Suno AI音乐 | 专业生成音乐 创作平台",
				meta: [
					{
						name: 'description',
						content: 'AI音乐生成 - Suno AI音乐 | 专业生成音乐 创作平台'
					}
				]
			}
		},
		data() {
			return {
				
				// 歌词
				lyrics: `[Instrumental Intro]<br/ ><br/ >
					[Verse 1]<br/ >
					Once upon a midnight dreary, while I pondered, weak and weary,<br/ >
					Over many a quaint and curious volume of forgotten lore—<br/ >
					While I nodded, nearly napping, suddenly there came a tapping,<br/ >
					As of some one gently rapping, rapping at my chamber door.<br/ >
					"'Tis some visitor," I muttered, "tapping at my chamber door—<br/ >
					Only this and nothing more."<br/ ><br/ >

					[Instrumental Solo]<br/ ><br/ >

					[Chorus]<br/ >
					Ah, distinctly I remember it was in the bleak December;<br/ >
					And each separate dying ember wrought its ghost upon the floor.<br/ >
					Eagerly I wished the morrow;—vainly I had sought to borrow<br/ >
					From my books surcease of sorrow—sorrow for the lost Lenore—<br/ >
					For the rare and radiant maiden whom the angels name Lenore—<br/ >
					Nameless here for evermore.<br/ ><br/ >

					[Instrumental Solo]<br/ ><br/ >

					[Verse 2]<br/ >
					And the silken, sad, uncertain rustling of each purple curtain<br/ >
					Thrilled me—filled me with fantastic terrors never felt before;<br/ >
					So that now, to still the beating of my heart, I stood repeating<br/ >
					"'Tis some visitor entreating entrance at my chamber door—<br/ >
					Some late visitor entreating entrance at my chamber door;—<br/ >
					This it is and nothing more."<br/ ><br/ >

					[Instrumental Solo]<br/ ><br/ >

					[Chorus]<br/ >
					Ah, distinctly I remember it was in the bleak December;<br/ >
					And each separate dying ember wrought its ghost upon the floor.<br/ >
					Eagerly I wished the morrow;—vainly I had sought to borrow<br/ >
					From my books surcease of sorrow—sorrow for the lost Lenore—<br/ >
					For the rare and radiant maiden whom the angels name Lenore—<br/ >
					Nameless here for evermore.<br/ ><br/ >

					[Instrumental Solo]<br/ ><br/ >

					[Bridge]<br/ >
					Presently my soul grew stronger; hesitating then no longer,<br/ >
					"Sir," said I, "or Madam, truly your forgiveness I implore;<br/ >
					But the fact is I was napping, and so gently you came rapping,<br/ >
					And so faintly you came tapping, tapping at my chamber door,<br/ >
					That I scarce was sure I heard you"—here I opened wide the door;—<br/ >
					Darkness there and nothing more.<br/ ><br/ >

					[Instrumental Solo]<br/ ><br/ >

					[outro]<br/ >
					And the Raven, never flitting, still is sitting, still is sitting<br/ >
					On the pallid bust of Pallas just above my chamber door;<br/ >
					And his eyes have all the seeming of a demon’s that is dreaming,<br/ >
					And the lamp-light o’er him streaming throws his shadow on the floor;<br/ >
					And my soul from out that shadow that lies floating on the floor<br/ >
					Shall be lifted—nevermore!<br/ ><br/ >

					[Instrumental Solo]<br/ ><br/ >
					And his eyes have all the seeming of a demon’s that is dreaming,<br/ >
					And the lamp-light o’er him streaming throws his shadow on the floor;<br/ >
					And my soul from out that shadow that lies floating on the floor<br/ >
					Shall be lifted—nevermore!<br/ ><br/ >

					[End]<br/ >
				`
				
			}
		},
		asyncData({ app }) {
			
		},
		mounted(){
			
		},
	}
</script>

<style lang="scss" scoped>
	.page{
		height: 100%;
		flex-direction: row;
		.left{
			flex: 1;
			width: 0;
			height: 100%;
			position: relative;
			&:after{
				content: "";
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 100%;
				height: 100%;
				filter: blur(200px);
				background: rgba(0,0,0,0.7);
			}
			.background{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 60vw;
				height: 60vw;
				filter: blur(190px);
			}
			.main{
				padding: 0 25px 0 35px;
				position: relative;
				z-index: 5;
				width: 100%;
				height: 100%;
				overflow-y: auto;
				&:hover {&::-webkit-scrollbar-track,&::-webkit-scrollbar-thumb {visibility: visible;}}
				&::-webkit-scrollbar {width: 3px;height: 3px;}
				&::-webkit-scrollbar-track,
				&::-webkit-scrollbar-thumb {border-radius: 999px;border: 0px solid transparent;visibility: hidden;}
				&::-webkit-scrollbar-track {box-shadow: 1px 1px 5px rgba(100, 100, 100, 0.2) inset;}
				&::-webkit-scrollbar-thumb {min-height: 0px;background-clip: content-box;box-shadow: 0 0 0 5px rgba(100, 100, 100, 0.5) inset;}
				&::-webkit-scrollbar-corner {background: transparent;}
				.head{
					flex-direction: row;
					align-items: center;
					.cover{
						flex-shrink: 0;
						width: 300px;
						height: 300px;
						border-radius: 15px;
						overflow: hidden;
						background-color: #fefff9;
						padding: 10px;
						img{
							display: block;
							width: 100%;
							height: 100%;
							border-radius: 15px;
						}
					}
					.info{
						flex: 1;
						width: 0;
						margin-left: 35px;
						.h3{
							line-height: 1.45;
							font-weight: bold;
							font-size: 23px;
							color: #FFF;
						}
						.tar{
							flex-direction: row;
							align-items: center;
							margin-top: 15px;
							.item{
								margin-right: 40px;
								flex-direction: row;
								align-items: center;
								position: relative;
								&:nth-last-child(1){
									&:after{
										display: none;
									}
								}
								.iconfont{
									background: #27272a;
									line-height: 26px;
									width: 26px;
									border-radius: 50%;
									text-align: center;
									color: rgba(255,255,255,0.65);
									font-size: 12px;
									margin-right: 7px;
								}
								.text{
									color: rgba(255,255,255,0.6);
									font-size: 15px;
								}
								&:after{
									content: "";
									position: absolute;
									right: -19px;
									height: 15px;
									width: 1px;
									background: rgba(255,255,255,0.1);
								}
							}
						}
						.prompt{
							margin-top: 10px;
							color: rgba(255,255,255,0.6);
							font-size: 15px;
							line-height: 1.4;
						}
						.btnFlex{
							margin-top: 22px;
							flex-direction: row;
							align-items: center;
							.item{
								background: #01dddc;
								line-height: 42px;
								padding: 0 45px;
								border-radius: 5px;
								font-size: 16px;
								font-weight: bold;
								transition: 0.2s all;
								cursor: pointer;
								margin-right: 22px;
								&:hover{
									opacity: 0.8;
								}
							}
						}
						.playFlex{
							margin-top: 45px;
							flex-direction: row;
							align-items: center;
							.item{
								margin-right: 10px;
								text-align: center;
								transition: 0.2s all;
								cursor: pointer;
								flex-direction: row;
								align-items: center;
								padding: 0 16px;
								height: 35px;
								border-radius: 5px;
								&:hover{
									opacity: 0.8;
									background: rgba(255,255,255,0.08);
								}
								&.hover{
									background: rgba(255,255,255,0.08);
									.iconfont{
										
									}
									.text{
										
									}
								}
								.iconfont{
									font-size: 16px;
									color: rgba(255,255,255,0.75);
								}
								.text{
									margin-left: 6px;
									font-size: 15px;
									color: rgba(255,255,255,0.85);
								}
							}
							.playRight{
								flex: 1;
								width: 0;
								margin-left: 25px;
								flex-direction: row;
								align-items: center;
								justify-content: flex-end;
							}
						}
					}
				}
				.lyrics{
					padding-bottom: 40px;
					padding-top: 28px;
					margin-top: 30px;
					color: rgba(255,255,255,0.9);
					font-size: 17px;
					line-height: 1.65;
					position: relative;
					&:after{
						content: "";
						position: absolute;
						top: 0;
						left: 0;
						right: 10px;
						border-top: 1px dashed rgba(255,255,255,0.07);
					}
				}
			}
		}
		.right{
			max-width: 26%;
			width: 400px;
			height: 100%;
			padding-bottom: 22px;
			.main{
				width: 100%;
				height: 100%;
				background: rgba(22,25,30,0.45);
				backdrop-filter: blur(30px);
				border-radius: 12px;	
				overflow-y: auto;
				padding: 25px;
				&:hover {&::-webkit-scrollbar-track,&::-webkit-scrollbar-thumb {visibility: visible;}}
				&::-webkit-scrollbar {width: 3px;height: 3px;}
				&::-webkit-scrollbar-track,
				&::-webkit-scrollbar-thumb {border-radius: 999px;border: 0px solid transparent;visibility: hidden;}
				&::-webkit-scrollbar-track {box-shadow: 1px 1px 5px rgba(100, 100, 100, 0.2) inset;}
				&::-webkit-scrollbar-thumb {min-height: 0px;background-clip: content-box;box-shadow: 0 0 0 5px rgba(100, 100, 100, 0.5) inset;}
				&::-webkit-scrollbar-corner {background: transparent;}
				.mainH3{
					color: #ebf8ff;
					font-size: 17px;
					line-height: 1.2;
					margin-top: -3px;
				}
				.musicFlex{
					flex-direction: column;
					margin-top: 18px;
					.musicItem{
						width: 100%;
						margin-bottom: 23px;
						position: relative;
						overflow: hidden;
						flex-direction: row;
						align-items: center;
						padding-bottom: 23px;
						border-bottom: 1px dashed rgba(255,255,255,0.07);
						&:nth-last-child(1){
							margin-bottom: 0;
							border-bottom: 0;
							padding-bottom: 0;
						}
						.cover{
							position: relative;
							z-index: 2;
							width: 74px;
							height: 74px;
							border-radius: 7px;
							overflow: hidden;
							cursor: pointer;
							img{
								width: 100%;
								height: 100%;
								border-radius: 7px;
								transition: 0.2s all;
								&:hover{
									transform: scale(1.05);
								}
							}
						}
						.info{
							position: relative;
							z-index: 2;
							flex: 1;
							width: 0;
							margin-left: 15px;
							.h3{
								color: #ebf8ff;
								font-size: 17px;
								font-weight: bold;
								line-height: 20px;
								cursor: pointer;
								transition: 0.2s all;
								&:hover{
									opacity: 0.8;
								}
							}
							.desc{
								color: rgba(224, 245, 255, 0.6);
								font-size: 14px;
								line-height: 20px;
								margin-top: 9px;
								cursor: pointer;
								transition: 0.2s all;
								&:hover{
									opacity: 0.8;
								}
							}
						}
						.btn{
							position: relative;
							z-index: 2;
							color: rgba(235,248,255,0.7);
							margin-left: 15px;
							line-height: 36px;
							width: 36px;
							text-align: center;
							font-size: 16px;
							background: rgba(255,255,255,0.04);
							border-radius: 100px;
							padding-left: 2px;
							cursor: pointer;
							transition: 0.2s all;
							&:hover{
								transform: scale(1.05);
								opacity: 0.8;
							}
						}
					}
				}
			}
		}
	}
</style>